<template>
	<view>
		<scroll-view class="my-scroll" scroll-x scroll-with-animation :scroll-left="tabLeft">
			<view :class="['tab-item',activeIndex==index&&'active']" v-for="(item, index) in localData" :key="index"
				@click="selectTab(item, index)">
				<text>{{item.title}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		tabsList
	} from '@/common/common.js'
	export default {
		name: "scroll-tabs",
		data() {
			return {
				localData: [],
				tabLeft: 0,
				activeIndex: 0,
				tabsWidth: 0
			};
		},
		created() {
			this.localData = tabsList
			const system = uni.getSystemInfoSync()
			this.tabsWidth = system.windowWidth / 5
		},
		methods: {
			selectTab(item, index) {
				this.activeIndex = index
				this.tabLeft = (index - 1) * (this.tabsWidth + 6)
			}
		}
	}
</script>

<style lang="scss">
	.my-scroll {
		height: 40px;
		background-color: #EEE;
		display: flex;
		white-space: nowrap;
		align-items: center;
		font-size: 14px;

		.tab-item {
			margin-top: 10px;
			padding: 0 10px;
			display: inline-block;
			margin-right: 10px;
			border: 1px solid #333;
			border-radius: 45px;

			&.active {
				background-color: #FFF1EC;
				border: 1px solid #FF7135;
				color: #FF7135;
			}
		}
	}
</style>